import React, { useMemo, useEffect } from 'react'
import { Form, Select, Cascader } from 'antd'
import { useRecoilValue } from 'recoil'
import styles from './index.module.less'
import useHooks from '../../hooks/hospital'
import { contextForHospital } from '../../_context'
import { Status } from '../../type/hospital'
import HospitalTable from '../HospitalTable'
import CardData from '@/components/CardData'
import { washYear } from '@/utils'
import { dictValues, dictValuesSelector } from '@/store/dicts'

export default () => {
  const selfHooks = useHooks()
  const enumDict = useRecoilValue(dictValues)
  const { quarterSelect, basicMsg, filterForm, quarterOptions, allWard, formChange, wardHeadList, getListHandle } =
    selfHooks
  const header = useMemo(
    () => (
      <div className={styles.header}>
        <div className={styles.titleItem}>
          医院加入时间: <span>{basicMsg?.hospitalApplyTime}</span>
        </div>
        <div className={styles.titleItem}>
          当前需要填报季度: <span>{basicMsg?.quarterNow}</span>
        </div>
      </div>
    ),
    [basicMsg],
  )
  const wardOption = useMemo(
    () => (
      <>
        {allWard.map((item) => (
          <Select.Option key={item.wordId} value={item.wordId}>
            {item.wordName}
          </Select.Option>
        ))}
      </>
    ),
    [allWard],
  )
  const statusOption = useMemo(
    () => (
      <>
        <Select.Option value=''>全部</Select.Option>
        {enumDict.report_status.map((item) => (
          <Select.Option key={item.value} value={Number(item.value)}>
            {item.label}
          </Select.Option>
        ))}
      </>
    ),
    [enumDict.report_status],
  )
  return (
    <contextForHospital.Provider value={selfHooks}>
      {header}
      <Form
        onValuesChange={formChange}
        // initialValues={{ ward: '', status: '' }}
        form={filterForm}
        className={styles.filterForm}
      >
        <Form.Item name='quarter' label='季度'>
          {/* <Select placeholder='请选择季度' style={{ width: '200px', marginRight: '16px' }}>
            {quarterOption}
          </Select> */}
          <Cascader
            options={washYear(quarterOptions)}
            placeholder='请选择季度'
            style={{ width: '200px', marginRight: '16px' }}
            onChange={quarterSelect}
            allowClear={false}
          />
        </Form.Item>

        <Form.Item name='wordId' label='病区'>
          <Select
            onChange={() => getListHandle()}
            placeholder='请选择病区'
            style={{ width: '200px', marginRight: '16px' }}
          >
            {wardOption}
          </Select>
        </Form.Item>

        <Form.Item name='status' label='状态'>
          <Select onChange={() => getListHandle()} placeholder='请选择状态' style={{ width: '200px' }}>
            {statusOption}
          </Select>
        </Form.Item>
      </Form>
      <CardData cardList={wardHeadList} />
      <HospitalTable />
    </contextForHospital.Provider>
  )
}
